<template>
	<view style="height: 100vh;">
		<image style="width: 100%; height: 18%;"
			src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=800">
		</image>

		<view style="height: 86%;
           background-color: red;
           position: relative;
           top: -38px;
           border-top-left-radius: 28px;
           border-top-right-radius: 28px;">
			<view class="container">
				<!-- 顶部头像和登录提示 -->
				<view class="profile" @click="goLogin">
					<image class="avatar"
						src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=800">
					</image>
					<text class="login-text">请点击登录</text>
				</view>

				<!-- 列表项 -->
				<view class="menu">
					<view class="menu-item" @click="goToFavorites">
						<image class="icon"
							src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=800">
						</image>
						<text class="menu-text">我的收藏</text>
						<text class="arrow">›</text>
					</view>

					<view class="menu-item" @click="goToOrders">
						<image class="icon"
							src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=800">
						</image>
						<text class="menu-text">我的订单</text>
						<text class="arrow">›</text>
					</view>

					<view class="menu-item" @click="goToAccountSettings">
						<image class="icon"
							src="https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&w=800">
						</image>
						<text class="menu-text">账户设置</text>
						<text class="arrow">›</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

			goLogin() {
				wx.cloud.callFunction({
				  name: 'cloudbase_module',
				  data: {
				    name: 'wx_user_get_open_id',
				  },
				  success: (res) => {
				    const openId = res.result?.openId;
				    console.log('获取到的openId：', openId);
				  },
				});

			}
		}
	}
</script>

<style lang="scss">
	.container {
		border-top-left-radius: 28px;
		border-top-right-radius: 28px;
		background-color: #f5efe4;
		height: 100%;
	}

	.profile {
		display: flex;
		align-items: center;
		padding: 20px;
	}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.login-text {
		font-size: 18px;
		color: #4a3c33;
	}

	.menu {
		// background-color: #fdf8f3;
		margin-top: 10px;
	}

	.menu-item {
		display: flex;
		align-items: center;
		padding: 21px 25px;
		border-bottom: 1px solid #eaeaea;
	}

	.icon {
		width: 20px;
		height: 20px;
		margin-right: 15px;
	}

	.menu-text {
		flex: 1;
		font-size: 16px;
		color: #4a3c33;
	}

	.arrow {
		font-size: 16px;
		color: #4a3c33;
	}
</style>